<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h3>{{this.message}}</h3>
    <button @click="message='hello Vue3'">change</button>
</div>
<script src="../../JavaScript/vue.js"></script>
<script>
    /*
    *data属性传入一个函数，并且该函数需要返回一个对象
    *   在Vue2的时候可以传入一个对象(但是组件内的data必须是函数)
    *   在Vue3的时候data必须传入一个函数，否则报错
    *   data中返回的对象会被Vue的响应式系统劫持，之后对该对象的修改或者访问都会在劫持中被处理，所以我们在template或者是app通过插值语法访问data中的属性时可以从对象中获取到数据
    *   当我们修改data属性中的值时，插值语法中对应的模板也会随着重新渲染
    * data 用于声明组件初始响应式状态的函数。
    * 该函数应当返回一个普通 JavaScript 对象，Vue 会将它转换为响应式对象。实例创建后，可以通过 this.$data 访问该响应式对象。组件实例也代理了该数据对象上所有的属性，因此 this.a 等价于 this.$data.a。
    * */
    const app=Vue.createApp({
        data(){
            return{
                message:"hello world"
            }
        }
    })
    app.mount("#app")
</script>
</body>
</html>